<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>theme - localStorage</title>
    <!--<link rel="stylesheet" id = "theme" href="css/green.css">-->
<style>
    *{margin: 0;padding: 0}
    .theme-style{overflow: hidden;margin: auto;width: 300px;}
    .theme-style li{display: inline-block;width: 50px;height: 50px;margin-right: 0.5em;float: left;cursor: pointer}
    .box{width: 400px;margin: auto;line-height: 40px;}
    .theme-style li:nth-child(1){background: red}
    .theme-style li:nth-child(2){background: green}
    .theme-style li:nth-child(3){background:yellow}
    .theme-style li:nth-child(4){background: pink}
    .theme-style li:nth-child(5){background: orange}
</style>
</head>
<body>
    <ul id="theme-style" class="theme-style">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <div class="box">
        <p>上周五下午三点收到一个沙特客户钢制更衣柜的询价. 严格意义上也算个老客户，两年前下过一个订单. 当时收到货后还比较满意，曾经有意向要做沙特的代理，后来因为经济情况不了了之.</p>
    </div>
</body>
</html>
<script>
    //自动加载加入节点
    var link = document.createElement('link');
    var head = document.getElementsByTagName('head')[0];
    link.rel = 'stylesheet';
    link.id = 'theme';
    localStorage.getItem('url') ? link.href = localStorage.getItem('url') : link.href = 'css/red.css';
    head.appendChild(link)
    
    
    
    //获取内联样式
    function getCss(obj,name){
        if(obj.currentStyle) {
            return obj.currentStyle[name];
        }
        else {
            return document.defaultView.getComputedStyle(obj,null)[name];
        }
    }
    
    
    var arr = ['red' , 'green' , 'yellow' , 'pink' , 'orange'];
    var themeStyle = document.getElementById('theme-style').getElementsByTagName('li');
    var link = document.getElementById('theme');
    //更换样式
    for(var i = 0 ; i < themeStyle.length ; i++ ){
        (function(number){
            themeStyle[i].onclick = function(){
                localStorage.setItem('url','css/'+arr[number]+'.css');
                link.setAttribute('href',localStorage.getItem('url'));
            }
        })(i);
    }
</script>